<template>
    <view :class="[globalConfig.layout=='horizontal' && metadata.type!='subTable'?'rx-horizontal':'']"
          v-if="!titleList.includes(metadata.type)">
        <view class="sub-name" v-if="headList.contains(metadata.type)">
            <view class="sub-head">{{ controlName(metadata) }}<span v-if="required" class="require-symbol">*</span></view>
            <div class="sub-head-describe" v-if="metadata.control.describe && !metadata.control.describePosition && metadata.type=='subTable'" v-html="metadata.control.describe"></div>
        </view>
        <MFormTitle
            v-else-if="metadata.control.showTitle"
            :name="metadata.name"
            :required="required"
            :rules="metadata.rules"
            :style="geStyle()"
            :metadata="metadata"
            :value="value">
        </MFormTitle>
        <div class="x-help-describe" v-if="metadata.control.describe && !metadata.control.describePosition && metadata.type!='subTable'" v-html="metadata.control.describe"></div>
        <view class="rx-center">
            <MComponent
                ref="current"
                v-model="modelVal"
                :data="data"
                :metadata="metadata"
                :readOnly="readOnly"
            ></MComponent>
            <div class="x-help-describe-bottom" v-if="metadata.control && metadata.control.describe && metadata.control.describePosition" v-html="metadata.control.describe"></div>
        </view>
    </view>
</template>

<script>
import FormConstant from "../../../../js/FormConstant.js";
import MFormTitle from "./MFormTitle"
import MComponent from "./MComponent"

export default {
    name: "MFormItem",
    inject:{
        formVm:{}
    },
    components: {
        MFormTitle,
        MComponent,
    },
    props: {
        /**
         *上下文全部数据
         */
        data: {
            type: Object,
        },
        /**
         * 控件属性
         */
        metadata: {
            type: Object
        },
        /**
         * 当前值
         */
        value: '',
        /**
         *表单只读
         */
        readOnly: {
            default: () => {
                return false
            }
        },
        /**
         * 是否必填
         */
        required: {
            default: () => {
                return false
            }
        },
    },
    computed: {
        modelVal: {
            get() {
                let {type, field, isForm} = this.metadata;
                let tableName = FormConstant.SubPrefix + field;
                if (type === FormConstant.SubTable) {
                    let subField = isForm ? field : tableName;
                    if (this.data.hasOwnProperty(subField)) {
                        return this.data[subField]
                    } else {
                        return isForm ? "" : []
                    }
                } else if (this.data.hasOwnProperty(field)) {
                    return this.data[field];
                }
                return ''
            },
            set(value) {
                let {type, field, isForm} = this.metadata;
                let tableName = FormConstant.SubPrefix + field;
                if (type === FormConstant.SubTable) {
                    if (isForm) {
                        this.data[field] = value;
                    } else {
                        this.data[tableName] = value;
                    }
                } else if (this.data.hasOwnProperty(field)) {
                    this.data[field] = value;
                }
            }
        },
        controlName(){
            let self = this;
            let { formVm } = this;
            return (item)=>{
                let {nameCondition} = item.control;
                if(nameCondition){
                    try {
                        if(nameCondition.indexOf('return ') === -1){
                            nameCondition = `return ${nameCondition}`;
                        }
                        let fn = new Function('data','self',nameCondition).call(formVm,formVm.data,formVm);
                        return fn
                    }catch (e) { }
                }
                return self.$i18(item.name) ;
            }
        }
    },
    data() {
        return {
            curVal: '',
            titleList: ['grid'],
            globalConfig: {},
            headList: ['subTable', 'dataList']
        }
    },
    created() {
        this.globalConfig = uni.getStorageSync('globalConfig');
    },
    methods: {
        geStyle() {
            let style = {}
            if (this.globalConfig.layout == 'horizontal' && this.metadata.type != 'subTable') {
                style = {
                    textAlign: this.globalConfig.align,
                    width: this.globalConfig.labelWidth,
                }
            }
            return style
        }
    }

}
</script>

<style scoped>
.rx-horizontal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sub-head {
    padding-left: 1rem;
    font-size: 1rem;
    color: rgba(51, 51, 51, 1);
    text-align: left;
    margin-left: 0.5rem;
    position: relative;
}

.sub-head::after {
    content: "|";
    color: rgba(66, 133, 244, 1);
    font-weight: bold;
    position: absolute;
    left: 0.5rem;
    top: -0.1rem;
}

.sub-name {
    display: flex;
    flex-direction: column;
    border-bottom: 0.02rem solid rgba(232, 232, 232, 1);
    background: white;
    padding: 0.5rem 0rem;
}
.sub-head-describe{
    margin-left: 1.5rem;
}

.require-symbol {
    display: inline-block;
    margin-left: 4px;
    width: auto;
    color: red;
    margin-right: 2px;
}

.rx-center {
    flex: 1;
    margin-top: 0.5rem
}
</style>
